<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul li{
    list-style: none;
  }
  .calculatorBox{
    width: 300px;
    height: 400px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .head{
    width: 100%;
    height: 20px;
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
  }
  .head p{
    float: right;
  }
  .screen{
    width: 100%;
    height: 80px;
    background: #C0C0C0FF;
  }
  .num{
    font-size: 45px;
    height: 60px;
    /* border: 1px solid; */
    display: flex;
    justify-content: end;
  }
  .jisuan{
    font-size: 16px;
    height: 20px;
    /* border: 1px solid red; */
    font-weight: bold;
    display: flex;
    justify-content: end;
  }
  .btns{
    width: 100%;
    height: 300px;
    background: #A0A0A0FF;
  }
  .top{
    width: 100%;
    height: 60px;
    /* border: 1px solid; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding-top: 6px;
    /* line-height: 60px; */
  }
  .top li{
    width: 60px;
    height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 30px;
  }
  .bottom{
    width: 100%;
    height: 240px;
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
  }
  .bottom .left{
    padding-left: 6px;
    width: 220px;
    height: 100%;
    /* border: 1px solid blue; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .bottom li{
    width: 60px;
    height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 30px; 
  }
  .bottom .right{
    width: 80px;
    padding: 15px 0;
    /* border: 1px solid yellow; */
    display: flex;
    flex-direction: column; 
     justify-content: space-between;
     align-items: center;
  }
  .bottom .right .b{
    height: 90px;
    line-height: 90px;
    background: orange;
  }
  .bottom .left .a{
    width: 140px;
    
  }
</style>
<body>
  <div class="calculatorBox">
    <div class="head"><p>算的快,但不一定对</p> </div>
    <div class="screen">
      <div class="jisuan">
        <span class="topNum"></span>
        <span class="topSum"></span>
        <span class="topNum2"></span>
      </div>
      <div class="num">0</div>
    </div>
    <div class="btns">
      <ul class="top">
        <li class="clear">C</li>
        <li class="quyu">%</li>
        <li class="chu">÷</li>
        <li class="cheng">×</li>
      </ul>
     <div class="bottom">
      <ul class="left">
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="a">0</li>
        <li class="dian">.</li>
      </ul>
      <ul class="right">
        <li class="jian">-</li>
        <li class="jia">+</li>
        <li class="b">=</li>
      </ul>
     </div>
    </div>
  </div>
</body>
</html>
<script>
  var jia=document.querySelector('.jia')
  var jian=document.querySelector('.jian')
  var cheng=document.querySelector('.cheng')
  var chu=document.querySelector('.chu')
  var quyu=document.querySelector('.quyu')
  var clear=document.querySelector('.clear')
  var top=document.querySelectorAll('.top')
  var left=document.querySelectorAll('.left')
  var right=document.querySelector('.dian')
  var b=document.querySelector('.b')
  var num=document.querySelector('.num')
  var topNum=document.querySelector('.topNum')
  var topNum2=document.querySelector('.topNum2')
  var topSum=document.querySelector('.topSum')
 
  var sum1
  var sum2
  var sum3
  var flag=true
  var sum0=0
  for(var i=0;i<left.length;i++){
    left[i].onclick=function(e){     
    
      this.flag=!this.flag
      if(this.flag){
        sum1=e.target.innerHTML
        num.innerHTML=sum1
      }else{
        sum2=e.target.innerHTML
        num.innerHTML=sum2
      }
      console.log('数字sum1',sum1)
      console.log('数字sum2',sum2)
      console.log(this.flag)
    }
  }
  jia.onclick=function(){
    num.innerHTML=this.innerHTML
    sum3=this.innerHTML
    console.log('符号',sum3)
    topSum.innerHTML=sum3
    topNum.innerHTML=sum1
    
  }
  // 求和
  b.onclick=function(){
    console.log('sum1',sum1)
    console.log('sum2',sum2)
    console.log('sum3',sum3)
    if(sum3=="+"){
    sum0=Number(sum1)+Number(sum2)
    num.innerHTML=sum0
    }
   
    topNum2.innerHTML=sum2
  }

// 清空计算器
  clear.onclick=function(){
    num.innerHTML=0
    topNum.innerHTML=""
    topNum2.innerHTML=""
    topSum.innerHTML=""
  }

</script>